<template>
  <div class="section user-section">
    <div class="head">
      <van-nav-bar class="nav-bar">
        <template #left>
          <van-icon name="arrow-left" @click="router.push('/')" />
        </template>

        <template #title>
          <div class="title">用户中心</div>
        </template>
      </van-nav-bar>
      <!-- 用户已经登录 -->
      <template v-if="hasUser">
        <div class="head-bg">
          <img class="img1" :src="bg1" alt="" />
          <img class="img2" :src="bg2" alt="" />
        </div>

        <yu-card class="user-info">
          <template #body>
            <div class="card-body clearfix">
              <div class="avatar fl">
                <img
                  src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
                  alt=""
                />
              </div>
              <div class="info fl">
                <div class="user-name ellipsis">
                  Hi,{{ user.userInfo.name }}
                </div>
                <div class="phone ellipsis">
                  {{ user.userInfo.branch }}，{{ user.userInfo.userType }}
                </div>
              </div>
            </div>
          </template>
        </yu-card>
      </template>
      <!-- 用户未登录 -->
      <template v-else>
        <div class="head-bg">
          <img class="img1" :src="bg1" alt="" />
          <img class="img2" :src="bg2" alt="" />
        </div>

        <yu-card class="user-info">
          <template #body>
            <div class="card-body clearfix">
              <div class="avatar fl">
                <img
                  src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
                  alt=""
                />
              </div>
              <div class="info fl">
                <van-button
                  type="primary"
                  size="small"
                  @click="
                    router.push({ name: 'edit', params: { isEdit: true } })
                  "
                  >Hi,请先完善个人信息</van-button
                >
              </div>
            </div>
          </template>
        </yu-card>
      </template>
    </div>

    <div class="body">
      <yu-card class="user-info-card">
        <template #body>
          <list
            class="user-info-list"
            @click="
              router.push({ name: 'edit', params: { fromWhere: 'check' } })
            "
          >
            <template #left><van-icon name="contact" />个人信息</template>
            <template #right>
              <div>查看资料 <van-icon name="arrow" /></div>
            </template>
          </list>

          <list class="user-info-list" @click="changePassword">
            <template #left><van-icon name="edit" />修改密码</template>
            <template #right>
              <div>
                <van-icon name="arrow" />
              </div>
            </template>
          </list>

          <list class="user-info-list">
            <template #left><van-icon name="wechat" />绑定微信</template>
            <template #right>
              <div>
                <van-icon name="arrow" />
              </div>
            </template>
          </list>

          <list class="user-info-list" @click="router.push('/message')">
            <template #left><van-icon name="friends-o" />支部通讯录</template>
            <template #right>
              <div>
                <van-icon name="arrow" />
              </div>
            </template>
          </list>
          <list class="user-info-list" @click="getInviteCode" v-if="user.userInfo.userType === '支部管理员'">
            <template #left><van-icon name="shield-o" />邀请码</template>
            <template #right>
              <div>
                <van-icon name="arrow" />
              </div>
            </template>
          </list>
          <list class="user-info-list" @click="feedback">
            <template #left><van-icon name="notes-o" />意见反馈</template>
            <template #right>
              <div>
                <van-icon name="arrow" />
              </div>
            </template>
          </list>
        </template>
      </yu-card>

      <yu-card class="user-info-card">
        <template #body>
          <list class="user-info-list">
            <template #center>
              <div @click="loginOut">退出登录</div>
            </template>
          </list>
        </template>
      </yu-card>
    </div>

    <div class="foot"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import { logout, generateInviteCode } from "/@/api/auth";
import toasts from "/@/views/components/toasts";
import { Dialog, Toast } from "vant";
import YuCard from "/@/components/YuCard";
import list from "/@/views/components/list/index.vue";
import bg1 from "/@/assets/imgs/bg-img1.png";
import bg2 from "/@/assets/imgs/bg-img2.png";
import useClipboard from "vue-clipboard3";

import { useRouter } from "vue-router";
import { useStore, mapState } from "vuex";

const router = useRouter();
const store = useStore();
const { toClipboard } = useClipboard();
var hasUser = ref(false);
const manager = ref(false);
const user = store.state.storage.user;
async function loginOut() {
  try {
    await Dialog.confirm({
      title: "消息",
      message: "是否确认退出",
    });
    await store.dispatch("user/logout");
    await router.push(`/login`);
    logout(
      {
        token: store.state.storage.user.token,
      },
      (res) => {
        if (res.code === 0) {
          toasts.success("成功登出！");
          store.commit("storage/setUser", null);
          store.commit("storage/setReport", null);
          hasUser = ref(false);
          window && window.location.reload();
        } else {
          toasts.error(res.msg);
        }
      }
    );
  } catch (e) {}
}

onMounted(() => {
  const userInfo = store.state.storage.user.userInfo;
  console.log("onMonted", userInfo);
  if (userInfo === undefined) {
    store.dispatch("user/logout");
    router.push(`/login`);
  } else if (userInfo.userType === "") {
    hasUser.value = false;
  } else {
    hasUser.value = true;
    if (userInfo.userType === "支部管理员") {
      manager.value = true;
    }
  }
});
const feedback = () => {
  Dialog.confirm({
    title: "消息",
    message: "请联系邮箱：zengyoucheng@hotmail.com",
  }).then(() => {
    copyInviteCode("zengyoucheng@hotmail.com");
    toasts.success("邮箱复制成功");
  });
};
const getInviteCode = () => {
  generateInviteCode({}, (res) => {
    if (res.code === 0) {
      Dialog.confirm({
        title: "消息",
        message: "邀请码为" + res.inviteCode,
      }).then(() => {
        copyInviteCode(res.inviteCode);
        toasts.success("邀请码复制成功");
      });
    }
  });
};
const changePassword = ()=>{
  router.push({name:'changePwd'})
}
const copyInviteCode = async (val) => {
  try {
    await toClipboard(val);
  } catch (e) {
    toasts.fail(e);
  }
};
</script>

<style lang="scss" scoped>
.user-section {
  background: var(--yu-gray-color--light);
  min-height: 100vh;

  .head {
    height: 170px;
    position: relative;
    .nav-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: transparent;
      border: none;
      .van-icon {
        color: var(--yu-white-color);
      }
      .title {
        color: var(--yu-white-color);
      }
      &:after {
        border: none;
      }
    }
    .head-bg {
      height: 150px;
      background: var(--yu-linear-bg-color);
      position: relative;
      overflow: hidden;
      width: 100%;
      img {
        display: inline-block;
        position: absolute;

        opacity: 0.2;
        &.img1 {
          top: 0;
          right: 0;
          width: 80px;
          height: auto;
        }
        &.img2 {
          bottom: 0;
          left: 0;
          width: 2rem;
          height: 2rem;
        }
      }
    }
  }

  .user-info {
    position: absolute;
    top: 66px;
    left: 13px;
    width: calc(100% - 26px);
    z-index: 9;
    .card-head-wrapper {
    }
    .card-body-wrapper {
      .avatar {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 16px;
        box-shadow: var(--yu-border-shadow--light);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        color: rgba(36, 45, 61, 1);
        font-size: 12px;
        line-height: 18px;
        padding-top: 10px;
        text-align: left;
        width: calc(100% - 60px - 16px);
        .user-name {
          margin-bottom: 4px;
          font-weight: 600;
        }
        .phone {
        }
      }
    }
    .card-foot-wrapper {
    }
  }

  .body {
    padding: 0 13px;
    margin-top: 10px;
  }
  .user-info-card {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
  }
  .user-info-list {
  }
}
</style>
